-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Refactor/#51] 댓글 컴포넌트 #52
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
어푸 미리 하겠습니다 ~
코멘트 확인하고 반영만 해주세요!
import Comment, { CommentData } from "./Comment"; | ||
|
||
interface CommentListProps { | ||
comments: CommentData[]; | ||
} | ||
|
||
const CommentList = ({ comments }: CommentListProps) => { | ||
return ( | ||
<div style={{ margin: "2.4rem" }}> | ||
{comments.map((comment) => ( | ||
<Comment key={comment.id} comment={comment} /> | ||
))} | ||
</div> | ||
); | ||
}; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
p5) 코멘트 리스트 만들어서 좀 더 명확하게 분리한 거 좋네요! 반영 잘 했습니다 👍
src/page/main/index/Main.tsx
Outdated
createdAt: "1시간 전", | ||
isWriter: "true", | ||
profileImage: | ||
"data:image/jpeg;base64,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", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
p2) 이건... 뭔가요..? 아마 이미지를 이렇게 넣어서 이렇게 된 것 같은데,
예시 데이터라도 여기에 직접 넣진 맙시다 ! import 해서 사용해주세요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수정했습니다 ~!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수고하셨습니당💖
@@ -21,7 +21,7 @@ const Comment = ({ comment }: CommentProps) => { | |||
<div className={styles.commentItem}> | |||
<div className={styles.contentContainer}> | |||
<div className={styles.header}> | |||
<img src={comment.profileImage} className={styles.profileImage} /> | |||
<img src={comment.profileImage} className={styles.profileImage} alt="프로필 이미지" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
p5) 적용업~👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
p2) 수정 너무 고생하셨씁니당 🥺🥺
- 추가로 대댓글 컴포넌트 생성 필요해보입니다.
SubComment 컴포넌트는 Comment 컴포넌트 내에서 받을 대댓글 response list 를 map 돌려서 렌더링 하면 됩니다!!
🔥 Related Issues
✅ 작업 리스트
🔧 작업 내용
공통 컴포넌트는 "재사용성" 이 용이해야 하는데 제가 처음에 짠 코드는 댓글 컴포넌트의 UI 부분과 데이터 렌더링 부분을 같이 구현해서 재사용성이 떨어지는 이슈가 생겼습니다.
🛠️ 수정 내용
하도록 파일을 두 가지로 분리.
❤️사용 방법
📣 리뷰어에게 어떠신가요?
살벌한 코리 기대하겠씁니다.
📸 스크린샷 / GIF / Link